<template>
	<view class="chat-container">
		<view class="chat-header">
			<view class="back-button" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="header-title">AI助手</view>
		</view>
		
		<!-- 专业类型选择栏 -->
		<view class="resume-type-selector">
			<view class="resume-type-scroll">
				<view 
					class="resume-type-item" 
					:class="{ active: selectedType === 1 }" 
					@click="selectResumeType(1)"
				>Java</view>
				<view 
					class="resume-type-item" 
					:class="{ active: selectedType === 2 }" 
					@click="selectResumeType(2)"
				>护士</view>
				<view 
					class="resume-type-item" 
					:class="{ active: selectedType === 3 }" 
					@click="selectResumeType(3)"
				>市场营销</view>
				<view 
					class="resume-type-item" 
					:class="{ active: selectedType === 4 }" 
					@click="selectResumeType(4)"
				>国际贸易</view>
				<view 
					class="resume-type-item" 
					:class="{ active: selectedType === 5 }" 
					@click="selectResumeType(5)"
				>财务会计</view>
				<view 
					class="resume-type-item" 
					:class="{ active: selectedType === 6 }" 
					@click="selectResumeType(6)"
				>人力资源</view>
			</view>
		</view>
		
		<!-- 上传简历功能区 -->
		<view class="resume-upload-area" v-if="showUploadArea">
			<view class="upload-title">上传简历图片获取AI分析</view>
			<view class="upload-buttons" v-if="!tempFilePath">
				<view class="upload-button album" @click="chooseFromAlbum">
					<view class="upload-icon">🖼️</view>
					<view class="upload-text">从相册选择</view>
				</view>
				<view class="upload-button camera" @click="takePhoto">
					<view class="upload-icon">📷</view>
					<view class="upload-text">拍照上传</view>
				</view>
			</view>
			<view class="preview-container" v-if="tempFilePath">
				<image class="preview-image" :src="tempFilePath" mode="aspectFit"></image>
				<view class="preview-actions">
					<view class="preview-action delete" @click="cancelUpload">删除</view>
					<view class="preview-action upload" @click="uploadImage">上传分析</view>
				</view>
			</view>
			<view class="upload-tips">
				支持jpg、jpeg、png格式图片
			</view>
			<view class="close-upload" @click="closeUploadArea">
				<text>×</text>
			</view>
		</view>
		
		<scroll-view class="chat-content" scroll-y="true" :scroll-into-view="scrollIntoView" scroll-with-animation>
			<view class="message-wrapper">
				<view class="message-item" :class="item.type" v-for="(item, index) in messageList" :key="index" :id="'msg-' + index">
					<view class="avatar" v-if="item.type === 'ai'">AI</view>
					<view class="avatar" v-if="item.type === 'user'">我</view>
					<view class="message-content" :class="{'loading-message': item.isLoading}">
						<!-- 加载动画 -->
						<view class="loading-container" v-if="item.isLoading">
							<text class="loading-text">正在分析您的简历</text>
							<view class="loading-dots">
								<view class="loading-dot"></view>
								<view class="loading-dot"></view>
								<view class="loading-dot"></view>
							</view>
							<view class="loading-bar">
								<view class="loading-progress"></view>
							</view>
						</view>
						
						<!-- 普通文本消息 -->
						<text class="message-text" v-else-if="!item.image">{{ item.content }}</text>
						
						<!-- 图片消息 -->
						<view class="message-image-container" v-else>
							<text class="message-text" v-if="item.content">{{ item.content }}</text>
							<image class="message-image" :src="item.image" mode="widthFix"></image>
						</view>
						
						<!-- 显示下载推荐简历的链接 -->
						<view class="resume-download" v-if="item.recommendedResume">
							<view class="resume-download-title">推荐简历模板</view>
							<view class="resume-download-link" @click="downloadResume(item.recommendedResume.jianurl)">
								点击下载推荐简历
							</view>
						</view>
					</view>
				</view>
				<!-- 用于自动滚动的空白元素 -->
				<view id="msg-bottom" style="height: 40rpx; width: 100%;"></view>
			</view>
		</scroll-view>
		
		<view class="chat-input-area">
			<view class="upload-resume-button" @click="toggleUploadArea">
				<text class="upload-icon">📄</text>
			</view>
			<view class="input-wrapper">
				<textarea class="chat-input" v-model="inputMessage" placeholder="请输入您的问题..." 
					@confirm="sendMessage" @input="adjustScroll" :maxlength="500" auto-height />
			</view>
			<view class="send-button" @click="sendMessage">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList: [
					{
						type: 'ai',
						content: '你好！我是AI助手，有什么我可以帮助你的吗？请选择您需要的简历专业类型。'
					}
				],
				inputMessage: '',
				scrollIntoView: 'msg-bottom',
				// 使用您的实际API地址
				// 注意：微信小程序正式环境需要HTTPS协议和域名备案
				// 开发环境可在开发工具中勾选"不校验合法域名"
				chatApiUrl: 'http://192.168.173.24:9223/ai/chat',
				resumeAnalyzeUrl: 'http://192.168.173.24:9223/resume/analyze',
				selectedType: 0, // 默认未选择
				showUploadArea: false, // 是否显示上传区域
				tempFilePath: '', // 选择的图片临时路径
				isUploading: false, // 是否正在上传
				_photoFilePath: '' // 用于存储相机拍照后的文件路径
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			// 应用加载时就预先检查安卓权限
			if(uni.getSystemInfoSync().platform === 'android') {
				// 初始化请求相机和存储权限
				setTimeout(() => {
					let permissionsList = [
						'android.permission.CAMERA',
						'android.permission.WRITE_EXTERNAL_STORAGE',
						'android.permission.READ_EXTERNAL_STORAGE'
					];
					plus.android.requestPermissions(
						permissionsList,
						function(resultObj) {
							console.log('应用加载时请求权限结果:', JSON.stringify(resultObj));
						},
						function(err) {
							console.error('应用加载时请求权限失败:', JSON.stringify(err));
						}
					);
				}, 1000); // 延迟1秒请求，避免页面初始化冲突
			}
			// #endif
		},
		mounted() {
			// 初始加载时滚动到底部
			this.scrollToBottom();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			scrollToBottom() {
				this.$nextTick(() => {
					// 先清除，再设置，强制触发更新
					this.scrollIntoView = '';
					setTimeout(() => {
						this.scrollIntoView = 'msg-bottom';
					}, 50);
				});
			},
			// 打开/关闭上传区域
			toggleUploadArea() {
				this.showUploadArea = !this.showUploadArea;
				if(!this.showUploadArea) {
					this.tempFilePath = '';
				}
			},
			// 关闭上传区域
			closeUploadArea() {
				this.showUploadArea = false;
				this.tempFilePath = '';
			},
			// 选择图片
			chooseImage() {
				// 弃用此方法，改为使用chooseFromAlbum和takePhoto
				this.chooseFromAlbum();
			},
			
			// 从相册选择
			chooseFromAlbum() {
				console.log('从相册选择图片');
				
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'], // 只使用相册
					success: (res) => {
						this.handleImageSuccess(res);
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 使用相机拍照 - 使用安卓原生方法
			takePhoto() {
				console.log('使用原生Intent调用相机');
				
				// #ifdef APP-PLUS
				if(uni.getSystemInfoSync().platform === 'android') {
					// 创建保存图片的目录
					const DTYPE = plus.android.importClass("android.provider.MediaStore$Images$Media");
					const ENVIRON = plus.android.importClass("android.os.Environment");
					const URI = plus.android.importClass("android.net.Uri");
					const File = plus.android.importClass("java.io.File");
					const Context = plus.android.importClass("android.content.Context");
					
					try {
						const main = plus.android.runtimeMainActivity();
						const Intent = plus.android.importClass("android.content.Intent");
						
						// 创建获取相机的Intent
						const intent = new Intent("android.media.action.IMAGE_CAPTURE");
						
						// 创建保存照片的文件
						const storageDir = ENVIRON.getExternalStoragePublicDirectory(ENVIRON.DIRECTORY_PICTURES);
						const photoFile = new File(storageDir, "ai_resume_" + new Date().getTime() + ".jpg");
						
						// 将文件路径转换为URI
						const photoURI = URI.fromFile(photoFile);
						
						// 设置输出路径
						intent.putExtra('output', photoURI);
						
						// 保存文件路径到全局变量
						this._photoFilePath = photoFile.getAbsolutePath();
						console.log("照片将保存到: " + this._photoFilePath);
						
						// 启动相机
						main.startActivityForResult(intent, 1);
						
						// 处理返回结果的监听器
						main.onActivityResult = (requestCode, resultCode, data) => {
							const RESULT_OK = -1; // Android的RESULT_OK值为-1
							console.log("相机返回, requestCode: " + requestCode + ", resultCode: " + resultCode);
							
							if(requestCode === 1) {
								if(resultCode === RESULT_OK) {
									console.log("相机拍照成功，路径: " + this._photoFilePath);
									// 检查文件是否存在
									const photoFileCheck = new File(this._photoFilePath);
									if(photoFileCheck.exists()) {
										console.log("文件存在，大小: " + photoFileCheck.length() + " 字节");
							
										// 将文件路径转换为应用可访问的格式
										plus.io.resolveLocalFileSystemURL("file://" + this._photoFilePath, (entry) => {
											const localUrl = entry.toLocalURL();
											console.log("转换后的图片路径: " + localUrl);
											this.tempFilePath = localUrl;
										}, (err) => {
											console.error("路径转换失败: ", err);
											this.showImageError();
										});
						} else {
										console.error("文件不存在: " + this._photoFilePath);
										this.showImageError();
									}
								} else {
									console.log("用户取消拍照");
								}
							}
						};
					} catch(e) {
						console.error("启动相机失败: ", e);
						// 使用备用方法
						this.fallbackTakePhoto();
					}
					return;
				}
				// #endif
				
				// 非安卓使用常规方法
				this.fallbackTakePhoto();
			},
			
			// 显示图片错误提示
			showImageError() {
							uni.showToast({
					title: '获取照片失败',
					icon: 'none',
					duration: 2000
							});
			},
			
			// 备用拍照方法 - 使用uni API
			fallbackTakePhoto() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera'], // 只使用相机
					success: (res) => {
						console.log('uni拍照成功: ', JSON.stringify(res));
						this.handleImageSuccess(res);
					},
					fail: (err) => {
						console.error('拍照失败:', JSON.stringify(err));
						uni.showToast({
							title: '拍照失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 处理图片选择/拍照成功
			handleImageSuccess(res) {
				if(res.tempFilePaths && res.tempFilePaths.length > 0) {
					const filePath = res.tempFilePaths[0];
					console.log('获取图片成功:', filePath);
					
					// #ifdef APP-PLUS
					// APP环境下，检查图片路径是否有效
					if (filePath.indexOf('file://') === 0) {
						// 路径有效，直接使用
						this.tempFilePath = filePath;
					} else {
						// 路径可能无效，尝试转换
						try {
							plus.io.resolveLocalFileSystemURL(filePath, (entry) => {
								const url = entry.toLocalURL();
								console.log('转换后的图片路径:', url);
								this.tempFilePath = url;
							});
						} catch (e) {
							console.error('路径转换失败:', e);
							// 仍然尝试使用原始路径
							this.tempFilePath = filePath;
						}
					}
					// #endif
					
					// #ifndef APP-PLUS
					// 非APP环境，直接使用临时路径
					this.tempFilePath = filePath;
					// #endif
				} else {
					uni.showToast({
						title: '获取图片失败',
						icon: 'none'
					});
				}
			},
			// 取消上传
			cancelUpload() {
				this.tempFilePath = '';
			},
			// 上传图片
			uploadImage() {
				// 保存当前的文件路径到一个本地变量，防止在过程中被修改
				const currentFilePath = this.tempFilePath;
				
				console.log('开始上传文件检查，当前路径:', currentFilePath);
				
				if (!currentFilePath) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					});
					return;
				}
				
				if (this.isUploading) {
					return;
				}
				
				if (!this.selectedType) {
					uni.showToast({
						title: '请先选择简历专业类型',
						icon: 'none'
					});
					return;
				}
				
				// 显示上传中
				uni.showLoading({
					title: '正在上传...',
					mask: true
				});
				
				this.isUploading = true;
				
				// 添加用户消息到列表 - 现在包含图片
				this.messageList.push({
					type: 'user',
					content: '我上传了一份简历，请帮我分析',
					image: currentFilePath
				});
				
				// 滚动到底部
				this.scrollToBottom();
				
				// 显示AI正在分析 - 使用动态加载条
				this.messageList.push({
					type: 'ai',
					isLoading: true // 表示这是一个加载中的消息
				});
				
				console.log('准备上传文件，路径:', currentFilePath);
				
				// 首先上传到七牛云，然后再调用简历分析接口
				this.uploadToQiniu(currentFilePath);
			},
			
			// 上传到七牛云
			uploadToQiniu(filePath) {
				console.log('开始上传到七牛云，文件路径:', filePath);
				
				// 上传到七牛云的接口
				const qiniuUploadUrl = 'http://192.168.173.24:9223/qiniu/upload';
				
				uni.uploadFile({
					url: qiniuUploadUrl,
					filePath: filePath,
					name: 'file',
					success: (uploadRes) => {
						try {
							console.log('七牛云上传成功，响应:', JSON.stringify(uploadRes));
							const qiniuResult = JSON.parse(uploadRes.data);
							
							if (qiniuResult.code === 200 && qiniuResult.url) {
								// 使用七牛云返回的URL进行简历分析
								this.analyzeResumeWithQiniuUrl(qiniuResult.url);
							} else {
								// 七牛云上传失败，回退到原来的上传方式
								console.error('七牛云上传失败:', qiniuResult.msg);
								this.handleUploadFail({errMsg: qiniuResult.msg || '七牛云上传失败'});
							}
						} catch (e) {
							console.error('解析七牛云上传响应失败:', e);
							this.handleUploadFail({errMsg: '解析响应失败'});
						}
					},
					fail: (err) => {
						console.error('七牛云上传请求失败:', JSON.stringify(err));
						this.handleUploadFail(err);
					}
				});
			},
			
			// 使用七牛云URL进行简历分析
			analyzeResumeWithQiniuUrl(imageUrl) {
				console.log('使用七牛云URL进行简历分析:', imageUrl);
				
				// 创建一个新的路径，专门处理七牛云URL的简历分析
				const analyzeUrlEndpoint = this.resumeAnalyzeUrl + '/url';
				console.log('使用API端点:', analyzeUrlEndpoint);
				
				try {
					// 尝试通过URL方式分析
					uni.request({
						url: analyzeUrlEndpoint,
						method: 'POST',
						data: {
							jianType: this.selectedType,
							imageUrl: imageUrl
						},
						success: (res) => {
							console.log('URL方式简历分析成功，响应:', JSON.stringify(res));
							
							if (res.data && res.data.code === 200) {
								// 处理成功响应
								const mockUploadRes = {
									data: JSON.stringify(res.data)
								};
								this.handleUploadSuccess(mockUploadRes);
							} else {
								console.log('URL方式分析失败，尝试转为文件上传方式');
								// URL方式失败，尝试下载图片并以文件形式上传
								this.downloadAndUploadImage(imageUrl);
							}
						},
						fail: (err) => {
							console.error('URL方式简历分析请求失败:', JSON.stringify(err));
							// 尝试文件上传方式作为备选
							this.downloadAndUploadImage(imageUrl);
						}
					});
				} catch (e) {
					console.error('URL分析异常:', e);
					// 作为备选，尝试下载并上传
					this.downloadAndUploadImage(imageUrl);
				}
			},
			
			// 下载七牛云图片并以文件形式上传
			downloadAndUploadImage(imageUrl) {
				console.log('正在下载七牛云图片用于文件上传:', imageUrl);
				
				uni.downloadFile({
					url: imageUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('图片下载成功，临时路径:', res.tempFilePath);
							// 以文件形式上传
							this.uploadAsFile(res.tempFilePath);
						} else {
							console.error('图片下载失败，状态码:', res.statusCode);
							this.handleUploadFail({errMsg: '图片下载失败'});
						}
					},
					fail: (err) => {
						console.error('图片下载失败:', JSON.stringify(err));
						this.handleUploadFail({errMsg: '图片下载失败:' + JSON.stringify(err)});
					}
				});
			},
			
			// 以文件形式上传
			uploadAsFile(filePath) {
				console.log('以文件形式上传:', filePath);
				
				uni.uploadFile({
					url: this.resumeAnalyzeUrl,
					filePath: filePath,
					name: 'file',
					formData: {
						jianType: this.selectedType
					},
					success: (uploadRes) => {
						console.log('文件上传成功，响应:', JSON.stringify(uploadRes));
						this.handleUploadSuccess(uploadRes);
					},
					fail: (err) => {
						console.error('文件上传失败:', JSON.stringify(err));
						this.handleUploadFail(err);
					},
					complete: () => {
						uni.hideLoading();
						this.isUploading = false;
						this.scrollToBottom();
						this.closeUploadArea();
					}
				});
			},
			
			// 处理上传成功的回调
			handleUploadSuccess(uploadRes) {
				// 移除"正在分析"的消息
				this.messageList.pop();
				
				try {
					// 解析响应数据
					const responseData = JSON.parse(uploadRes.data);
					
					if (responseData.code === 200 && responseData.data) {
						const analysisData = responseData.data;
						
						// 添加AI回复，现在包含图片
						const aiResponse = {
							type: 'ai',
							content: analysisData.ai_analysis.textResponse,
							image: this.tempFilePath // 包含用户上传的图片，便于回显
						};
						
						// 如果有推荐简历，添加下载链接
						if (analysisData.recommended_resume) {
							aiResponse.recommendedResume = analysisData.recommended_resume;
						}
						
						this.messageList.push(aiResponse);
					} else {
						// 处理错误
						this.messageList.push({
							type: 'ai',
							content: '简历分析失败：' + (responseData.msg || '未知错误')
						});
					}
				} catch (e) {
					console.error('解析响应数据失败:', e);
					this.messageList.push({
						type: 'ai',
						content: '解析响应数据失败，请稍后再试'
					});
				}
				
				// 添加消息后滚动到底部
				this.scrollToBottom();
			},
			
			// 处理上传失败的回调
			handleUploadFail(err) {
				console.error('上传失败详情:', JSON.stringify(err));
				// 移除"正在分析"的消息
				this.messageList.pop();
				
				// 提供更具体的错误信息
				let errorMsg = '上传简历失败';
				if (err.errMsg) {
					if (err.errMsg.includes('file not found')) {
						errorMsg += '：找不到文件，请重新选择图片';
					} else if (err.errMsg.includes('domain')) {
						errorMsg += '：服务器域名未授权，请确认已在开发工具中勾选"不校验合法域名"';
					} else if (err.errMsg.includes('empty')) {
						errorMsg += '：文件路径丢失，请重新选择图片';
					} else {
						errorMsg += '：' + err.errMsg;
					}
				}
				
				this.messageList.push({
					type: 'ai',
					content: errorMsg
				});
				
				// 添加滚动到底部
				this.scrollToBottom();
			},
			// 创建FormData（用于H5环境）
			createFormData(filePath) {
				// #ifdef H5
				// 在H5环境下创建FormData
				const formData = new FormData();
				
				// 从storage或者input元素获取文件
				let fileInput = document.getElementById('fileInput');
				if (fileInput && fileInput.files.length > 0) {
					formData.append('file', fileInput.files[0]);
				} else if (filePath) {
					// 如果传入了文件路径，尝试从url创建blob
					fetch(filePath)
						.then(res => res.blob())
						.then(blob => {
							formData.append('file', blob, 'resume.jpg');
						});
				}
				
				formData.append('jianType', this.selectedType);
				return formData;
				// #endif
				
				return null;
			},
			// 下载推荐简历
			downloadResume(url) {
				if (!url) return;
				
				uni.showLoading({
					title: '正在下载'
				});
				
				// 下载文件
				uni.downloadFile({
					url: url,
					success: (res) => {
						if (res.statusCode === 200) {
							console.log('下载成功，临时路径:', res.tempFilePath);
							
							// 根据平台不同，选择不同的保存方式
							// #ifdef MP-WEIXIN
							// 微信小程序：先保存到本地
							wx.saveFile({
								tempFilePath: res.tempFilePath,
								success: (saveRes) => {
									console.log('文件已保存，路径:', saveRes.savedFilePath);
									uni.showToast({
										title: '简历已保存',
										icon: 'success'
									});
									
									// 可以选择性地打开文件查看
									uni.openDocument({
										filePath: saveRes.savedFilePath,
										showMenu: true, // 显示菜单，允许用户进行转发、保存等操作
										success: () => {
											console.log('打开文档成功');
										}
									});
								},
								fail: (err) => {
									console.error('保存文件失败:', err);
									// 如果保存失败，尝试直接打开预览
									uni.openDocument({
										filePath: res.tempFilePath,
										showMenu: true,
										success: () => {
											console.log('打开文档成功');
											uni.showToast({
												title: '请使用右上角菜单保存文件',
												icon: 'none',
												duration: 2000
											});
										},
										fail: (openErr) => {
											console.error('打开文档失败:', openErr);
											uni.showToast({
												title: '无法打开文件',
												icon: 'none'
											});
										}
									});
								}
							});
							// #endif
							
							// #ifdef H5
							// H5环境：创建下载链接
							const a = document.createElement('a');
							// 获取文件名
							const fileName = url.substring(url.lastIndexOf('/') + 1) || 'resume.pdf';
							a.href = res.tempFilePath;
							a.download = fileName;
							document.body.appendChild(a);
							a.click();
							document.body.removeChild(a);
							uni.showToast({
								title: '下载完成',
								icon: 'success'
							});
							// #endif
							
							// #ifdef APP-PLUS
							// App环境：根据文件类型决定保存位置
							const filePath = res.tempFilePath;
							const fileExt = this.getFileExtension(url);
							if (fileExt === 'pdf' || fileExt === 'doc' || fileExt === 'docx') {
								// 文档类型：打开系统分享
								uni.shareWithSystem({
									type: 'file',
									title: '简历文件',
									href: filePath,
									success: () => {
										console.log('调用系统分享成功');
									},
									fail: () => {
										// 如果分享失败，尝试直接打开
										uni.openDocument({
											filePath: filePath,
											success: () => {
												console.log('打开文档成功');
											}
										});
									}
								});
							} else {
								// 图片类型：保存到相册
								uni.saveImageToPhotosAlbum({
									filePath: filePath,
									success: () => {
										uni.showToast({
											title: '已保存到相册',
											icon: 'success'
										});
									},
									fail: () => {
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										});
									}
								});
							}
							// #endif
							
							// 默认处理（其他平台）
							// #ifndef MP-WEIXIN || H5 || APP-PLUS
							uni.openDocument({
								filePath: res.tempFilePath,
								success: () => {
									console.log('打开文档成功');
									uni.showToast({
										title: '请手动保存文件',
										icon: 'none'
									});
								},
								fail: () => {
									uni.showToast({
										title: '无法打开文件',
										icon: 'none'
									});
								}
							});
							// #endif
						} else {
							uni.showToast({
								title: '下载失败: ' + res.statusCode,
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('下载失败:', err);
						uni.showToast({
							title: '下载文件失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			// 工具函数：获取文件扩展名
			getFileExtension(url) {
				if (!url) return '';
				const match = url.match(/\.([a-zA-Z0-9]+)(\?.*)?$/);
				return match ? match[1].toLowerCase() : '';
			},
			// 调整滚动位置
			adjustScroll() {
				// 输入文本时也确保页面在底部
				this.scrollToBottom();
			},
			// 选择简历类型
			selectResumeType(typeId) {
				this.selectedType = typeId;
				
				// 添加系统消息提示用户已选择类型
				let typeName = '';
				switch(typeId) {
					case 1: typeName = 'Java'; break;
					case 2: typeName = '护士'; break;
					case 3: typeName = '市场营销'; break;
					case 4: typeName = '国际贸易'; break;
					case 5: typeName = '财务会计'; break;
					case 6: typeName = '人力资源'; break;
				}
				
				this.messageList.push({
					type: 'ai',
					content: `您已选择${typeName}专业简历类型，请输入您的相关信息，我将为您生成专业简历。或者您可以点击左下角的上传按钮上传简历图片，获取AI分析。`
				});
				
				// 滚动到底部
				this.scrollToBottom();
			},
			sendMessage() {
				if (!this.inputMessage.trim()) return;
				
				// 添加用户消息到列表
				this.messageList.push({
					type: 'user',
					content: this.inputMessage
				});
				
				// 保存当前问题
				const currentQuestion = this.inputMessage;
				this.inputMessage = '';
				
				// 滚动到底部
				this.scrollToBottom();
				
				// 显示AI正在输入 - 使用动态加载条
				this.messageList.push({
					type: 'ai',
					isLoading: true // 使用加载动画
				});
				
				// 滚动到底部确保加载动画可见
				this.scrollToBottom();
				
				// 发送请求到AI接口
				uni.request({
					url: this.chatApiUrl,
					method: 'POST',
					data: {
						message: currentQuestion,
						mode: 'chat',
						resumeType: this.selectedType || undefined // 如果选择了类型，则传递类型ID
					},
					success: (res) => {
						// 移除正在加载的消息
						this.messageList.pop();
						
						if (res.data && res.data.code === 200 && res.data.data && res.data.data.textResponse) {
							// 添加AI回复
							this.messageList.push({
								type: 'ai',
								content: res.data.data.textResponse
							});
						} else {
							// 处理错误
							this.messageList.push({
								type: 'ai',
								content: '抱歉，我遇到了一些问题，请稍后再试。'
							});
						}
						
						// 滚动到底部
						this.scrollToBottom();
					},
					fail: (err) => {
						console.error(err);
						// 移除正在加载的消息
						this.messageList.pop();
						
						// 添加错误消息
						this.messageList.push({
							type: 'ai',
							content: '网络连接出错，请检查网络后重试。'
						});
						
						// 滚动到底部
						this.scrollToBottom();
					}
				});
			}
		}
	}
</script>

<style>
.chat-container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #f5f5f5;
	position: relative;
}

.chat-header {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background-color: #3b88fd;
	color: #fff;
	height: 80rpx;
	position: sticky;
	top: 0;
	z-index: 10;
}

.back-button {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-icon {
	font-size: 40rpx;
	font-weight: bold;
}

.header-title {
	flex: 1;
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
}

/* 简历类型选择栏样式 */
.resume-type-selector {
	background-color: #ffffff;
	border-bottom: 1rpx solid #e6e6e6;
	padding: 20rpx 0;
	position: sticky;
	top: 80rpx;
	z-index: 9;
}

.resume-type-scroll {
	display: flex;
	overflow-x: auto;
	white-space: nowrap;
	padding: 0 20rpx;
	-webkit-overflow-scrolling: touch;
	/* 隐藏滚动条 */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.resume-type-scroll::-webkit-scrollbar {
	display: none;
}

.resume-type-item {
	display: inline-block;
	padding: 15rpx 30rpx;
	margin-right: 20rpx;
	border-radius: 30rpx;
	background-color: #f0f0f0;
	color: #333;
	font-size: 28rpx;
	transition: all 0.3s;
}

.resume-type-item.active {
	background-color: #3b88fd;
	color: #ffffff;
	box-shadow: 0 4rpx 8rpx rgba(59, 136, 253, 0.2);
}

/* 上传简历区域样式 */
.resume-upload-area {
	background-color: #ffffff;
	margin: 20rpx;
	padding: 30rpx;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 8;
}

.upload-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
	text-align: center;
}

.upload-buttons {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.upload-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 300rpx;
	border: 2rpx dashed #ccc;
	border-radius: 8rpx;
	background-color: #f9f9f9;
	cursor: pointer;
}

.upload-buttons .upload-button {
	width: 48%;
	height: 240rpx;
}

.upload-buttons .upload-button.album {
	background-color: #f0f7ff;
}

.upload-buttons .upload-button.camera {
	background-color: #f0fff7;
}

.upload-icon {
	font-size: 80rpx;
	color: #3b88fd;
	margin-bottom: 20rpx;
}

.upload-text {
	font-size: 28rpx;
	color: #666;
}

.preview-container {
	width: 100%;
	position: relative;
}

.preview-image {
	width: 100%;
	height: 400rpx;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
}

.preview-actions {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.preview-action {
	padding: 15rpx 0;
	width: 48%;
	text-align: center;
	border-radius: 8rpx;
	font-size: 28rpx;
}

.preview-action.delete {
	background-color: #f0f0f0;
	color: #666;
}

.preview-action.upload {
	background-color: #3b88fd;
	color: #fff;
}

.upload-tips {
	font-size: 24rpx;
	color: #999;
	text-align: center;
	margin-top: 20rpx;
}

.close-upload {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	width: 40rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	font-size: 40rpx;
	color: #999;
	z-index: 2;
}

/* 聊天内容区域样式 */
.chat-content {
	flex: 1;
	height: calc(100vh - 250rpx); /* 减去头部、选择栏和输入区域的高度 */
	overflow-y: auto;
	position: relative;
	padding-bottom: 20rpx; /* 确保底部有足够空间 */
}

.message-wrapper {
	padding: 20rpx;
	padding-bottom: 40rpx;
}

.message-item {
	display: flex;
	margin-bottom: 30rpx;
	align-items: flex-start;
}

.message-item.user {
	flex-direction: row-reverse;
}

.avatar {
	width: 70rpx;
	height: 70rpx;
	border-radius: 50%;
	background-color: #3b88fd;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	margin: 0 20rpx;
	flex-shrink: 0; /* 防止头像被压缩 */
}

.message-item.user .avatar {
	background-color: #4CAF50;
}

.message-content {
	max-width: 70%;
	padding: 20rpx;
	border-radius: 10rpx;
	background-color: #ffffff;
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.message-content.loading-message {
	min-width: 300rpx; /* 确保加载消息有足够宽度 */
}

.message-item.user .message-content {
	background-color: #dcf8c6;
}

.message-text {
	font-size: 30rpx;
	line-height: 1.5;
	word-break: break-word;
}

/* 消息图片样式 */
.message-image-container {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.message-image {
	max-width: 100%;
	border-radius: 8rpx;
	margin-top: 10rpx;
}

/* 推荐简历下载样式 */
.resume-download {
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #eee;
}

.resume-download-title {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.resume-download-link {
	font-size: 28rpx;
	color: #3b88fd;
	padding: 10rpx 0;
	text-decoration: underline;
}

/* 输入区域样式 */
.chat-input-area {
	display: flex;
	padding: 15rpx;
	background-color: #ffffff;
	border-top: 2rpx solid #e0e0e0;
	align-items: center;
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 10;
}

.upload-resume-button {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15rpx;
	flex-shrink: 0;
}

.upload-icon {
	font-size: 32rpx;
}

.input-wrapper {
	flex: 1;
	position: relative;
	min-height: 80rpx;
	max-height: 200rpx;
	overflow: hidden;
	margin-right: 15rpx; /* 确保与发送按钮有适当间距 */
}

.chat-input {
	width: 100%;
	padding: 15rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 10rpx;
	font-size: 28rpx;
	max-height: 180rpx;
	min-height: 80rpx;
	box-sizing: border-box;
}

.send-button {
	width: 100rpx; /* 减小按钮宽度 */
	height: 75rpx;
	line-height: 75rpx;
	text-align: center;
	background-color: #3b88fd;
	color: white;
	border-radius: 10rpx;
	font-size: 28rpx;
	flex-shrink: 0;
}

/* 加载动画样式 */
.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.loading-text {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 15rpx;
}

.loading-dots {
	display: flex;
	justify-content: center;
	margin-bottom: 15rpx;
}

.loading-dot {
	width: 12rpx;
	height: 12rpx;
	background-color: #3b88fd;
	border-radius: 50%;
	margin: 0 5rpx;
	opacity: 0.6;
	animation: dotPulse 1.4s infinite ease-in-out;
}

.loading-dot:nth-child(1) {
	animation-delay: 0s;
}

.loading-dot:nth-child(2) {
	animation-delay: 0.2s;
}

.loading-dot:nth-child(3) {
	animation-delay: 0.4s;
}

.loading-bar {
	width: 100%;
	height: 6rpx;
	background-color: #e6e6e6;
	border-radius: 3rpx;
	overflow: hidden;
	margin-bottom: 10rpx;
}

.loading-progress {
	height: 100%;
	background-color: #3b88fd;
	border-radius: 3rpx;
	animation: progressAnimation 1.5s infinite ease-in-out;
	width: 30%;
}

@keyframes dotPulse {
	0%, 80%, 100% {
		transform: scale(0.6);
		opacity: 0.6;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes progressAnimation {
	0% {
		transform: translateX(-100%);
	}
	50% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(300%);
	}
}
</style> 